<template>
	<view class='content'>
		<view style="height: 10px;">
			
		</view>
		<u-cell-group class='list'>
			<u-cell title="原手机号">
				<view
					slot="value"
					class="u-slot-value"
				>
					{{ mobile }}
				</view>
			</u-cell>
		</u-cell-group>
		<u--form
		class='form'
		labelPosition="left"
		:model="model1"
		ref="form1"
		labelWidth='100'
	>
	<u-form-item
		label="新手机号"
		prop="mobile"
		borderBottom
		ref="item1"
	>
		<u--input
			v-model="model1.mobile"
			border="none"
			placeholder="请输入新手机号"
		></u--input>
	</u-form-item>
	<u-form-item
			label="验证码"
			prop="code"
			labelWidth="80"
			borderBottom
		>
			<u--input
				v-model="model1.code"
				border="none"
				placeholder="请填写验证码"
			></u--input>
			<u-button
				slot="right"
				@tap="getCode"
				:text="tips"
				type="success"
				size="mini"
				:disabled="disabled1"
			></u-button>
		</u-form-item>
	</u--form>
	<view class="btn">
		<u-button type="primary" text="提交" @click='submit'></u-button>
	</view>
	<u-code
		ref="uCode"
		@change="codeChange"
		seconds="60"
		@start="disabled1 = true"
		@end="disabled1 = false"
	></u-code>
	</view>
</template>

<script>
	import { validatePhone } from '@/utils/time.js'
	export default {
		data() {
			return {
				mobile: '',
				model1: {
					code: ''
				},
				tips: '',
				disabled1: false,
				rules: {
					'mobile': [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return validatePhone(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					code: {
						
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur']
					},
				}
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		onLoad(option) {
			this.getDetail()
			
		},
		methods: {
			getDetail(){
				var _this = this
				uni.request({
					url: 'http://www.yndzfl.cn/wxsite/Staff/personal',
					method: 'POST',
					header:{
						"Content-Type" : "application/x-www-form-urlencoded"
					},
					data: {
						token: uni.getStorageSync('token'),
					},
					success(res) {
						console.log(res)
						if(res.data.code == 1){
							_this.mobile = res.data.data.mobile
						}else if(res.data.code == -1){
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}else if(res.data.code == 408){
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							uni.reLaunch({
								url: '/pages/admin/login'
							})
						}
						
					}
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					var _this = this
					uni.request({
						url: 'http://www.yndzfl.cn/wxsite/Personal/sendSms',
						method: 'POST',
						header:{
							"Content-Type" : "application/x-www-form-urlencoded"
						},
						data: {
							openid: uni.getStorageSync('OPENID'),
							mobile: _this.model1.mobile
						},
						success(res) {
							console.log(res)
							if(res.data.code == 1){
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									uni.$u.toast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									_this.$refs.uCode.start();
							}
							
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			submit(){
				this.$refs.form1.validate().then(res => {
					// uni.$u.toast('校验通过')
					var _this = this
					uni.request({
						url: 'http://www.yndzfl.cn/wxsite/Staff/setMobile',
						method: 'POST',
						header:{
							"Content-Type" : "application/x-www-form-urlencoded"
						},
						data: {
							token: uni.getStorageSync('token'),
							code: _this.mobile1.code,
							mobile: _this.model1.mobile,
							newMobile: _this.mobile1.mobile
						},
						success(res) {
							console.log(res)
							if(res.data.code == 1){
								setTimeout(function(){
									uni.navigateBack()
								},1000)
							}
							
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style scoped>
.list{
	background-color: #fff;
}
.form{
	background-color: #fff;
	padding: 0 15px;
}
.btn{
	margin:20px 10px;
}
</style>
